<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-01 15:03:03
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2022-01-01 21:54:13
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Document_jsSDK</title>
  <script src="./js/jquery-2.1.1.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <style>
    .btn {
      height: 50px;
      line-height: 50px;
      background-color: #69f;
      border: none;
      color: #fff;
      border-radius: 3px;
    }

    .text-c {
      text-align: center;
    }
  </style>
</head>

<body ontouchstart="">
  <div class="wxapi_container" style="padding: 50px 10px;">
    <div class="lbox_close wxapi_form">

      <h3 id="menu-location">123一键导航测试</h3>
      <span class="desc">通过微信内置地图一建导航</span>
      <button class="btn btn_primary" id="openLocation">点击导航</button>
      <span class="desc">测试位置接口</span>
      <button class="btn btn_primary" id="getLocation">获取坐标</button>

      <div style="border: 1px solid #ccc; padding: 10px; margin-top: 10px; text-align: center;">
        <div><img id="icon" src="" style="width:60px;"></div>
        <div id="nickname">昵称</div>
      </div>
      <div style="margin-top: 10px;" class="text-c">
        <button class="btn" style="width: 40%;" onclick="getImg()">获取图片</button>
        <button class="btn" style="width: 40%;" onclick="getQrCode()">获取二维码</button>
      </div>
      <div style="margin-top: 20px;" class="text-c">
        <a href="/html" class="btn" style="width: 40%; display: inline-block;">
          重新加载
        </a>
        <button class="btn" style="width: 40%;" onclick="getInfo()">获取个人信息</button>
      </div>
      <div style="margin-top: 10px;" class="text-c">
        <img id="uploadImg" src="" style="width: 160px; height: 160px;" />
      </div>

      <div style="border: 2px solid #69f; padding-bottom: 50px;">
        <p>验证通过的api有:</p>
        <div id="apiList"></div>
      </div>

    </div>
  </div>
  <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
  <script>

    let origin = window.location.origin
    let isReady = false;
    let config = null;

    // 获取配置信息
    function getConfig(){
      let url = origin+"/getConfig"
      $.ajax({
          type: "GET",
          url,
          cache: false,
          async: true,
          beforeSend: function () {
            //等待延迟的函数
          },
          dataType: 'json',
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (data) {
            console.log('getConfig-成功--', data);
            config = data;
          }
      })
    }
    
    // 获取url的参数
    function getUrlParams() {
      let str = window.location.search
      console.log('str', str);
      // ?code=051YCH000vmCDN1EmM200Bdl0f3YCH0w:77 str ?
      if (str && str.includes("?") && str.includes("=")) {
        let obj = {}
        str = str.slice(1)
        if (str.includes("&")) {
          let arr = str.split("&")
          for (let i = 0; i < arr.length; i++) {
            let one = arr.split("=")
            obj[one[0]] = one[1]
          }
        } else {
          let one = str.split("=")
          obj[one[0]] = one[1]
        }
        return obj;
      }
    }

    let paramsObj = getUrlParams()
    console.log('paramsObj', paramsObj);
    if (paramsObj && paramsObj.code) {
      console.log('paramsObj', paramsObj);

      // 通过code，去获取用户信息
      let t = setTimeout(() => {
        clearTimeout(t)
        getUserInfoByCode(paramsObj.code)
      }, 1000)
    }
    $().ready(function () {

      // 获取微信配置信息
      getConfig()

      // 回填数据
      let img = window.localStorage.getItem('icon')
      let name = window.localStorage.getItem('nickname')
      if(img && name){
        $("#icon").attr("src", img)
        $("#nickname").text(name)
      }

      // function getUrlParams(url){ 
      //   const reg = /([^&?#]+)=([^&?#]+)/g; 
      //   const obj = {}; 
      //   url.replace(reg, (...arg) => { const [, arg1, arg2] = arg; obj[arg1] = arg2; }) 
      //   return obj; 
      // }
      // let rel = getUrlParams(window.location.href)
      // console.log('rel',rel);
      const wxConfig = {
        appId: 'wx3680aee5b396cc0f',                    // 这个要改成你自己的
        appsecret: '626c988a2e4af8cc459424187951792e',  // 这个也要改成你自己的
        token: '123456' // 这个是你自己随便写的，写成123abc也行
      }

      window.getInfo = () => {
        let backUrl = encodeURIComponent(config.userInfo_redirect_url)
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxConfig.appId}&redirect_uri=${backUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        window.location.href = url
      }

      window.getUserInfoByCode = (code) => {
        let url = '/getUserInfo?code=' + code

        $.ajax({
          type: "GET",
          url,
          cache: false,
          async: true,
          beforeSend: function () {
            //等待延迟的函数
          },
          dataType: 'json',
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (data) {
            console.log('getQrCode-成功--', data);
            $("#icon").attr("src", data.headimgurl)
            $("#nickname").text(data.nickname)

            // 持久化到浏览器
            window.localStorage.setItem('icon',data.headimgurl)
            window.localStorage.setItem('nickname',data.nickname)
            window.location.href = '/html'
          },
          fail: function (err) {
            console.log('getQrCode-err--', err);
          }
        })
      }

      window.getQrCode = () => {
        let data = {
          "expire_seconds": 604800,
          "action_name": "QR_SCENE",
          "action_info": {
            "scene": { "scene_id": 123 }
          }
        }

        let url = '../getQrCode'
        $.ajax({
          type: "POST",
          url,
          data,
          cache: false,
          async: false,
          dataType: 'json',
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (data) {
            console.log('getQrCode-成功--', data);
            // showQrCode(xmlobj)
            let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
            // 这样前端get请求，跳转页面
            window.location.href = url;
          }
        });
      }

      function showQrCode(data) {
        let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
        $.ajax({
          type: "Get",
          url,
          cache: false,
          async: false,
          dataType: 'json',
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (xmlobj) {
            console.log('QrCode-成功--', xmlobj);
          }
        });
      }

      function getLocalData(localid) {
        // $('#modal-img').show();
        //获取本地图片资源
        wx.getLocalImgData({
          localId: localid, // 图片的localID 
          success: function (res) {
            var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
            console.error("----------开始解析图片----localData-----------------:", localData.length)
            uploadImg.setAttribute('src', localData)
            //开始绑定
            $.ajax({
              url: "${pageContext.request.contextPath}/wechat/bindface",
              type: "post",
              data: {
                img: localData
              },
              contentType: 'application/x-www-form-urlencoded;charset=utf-8',
              async: true,
              success: function (data) {
                if ("SUCCESS" == data.code) {
                  location.reload();
                  $("#img").src = "../../img/${openid}.jpg?time=" + Math.random();
                  $("#addBtn").html("更新照片");
                }
              },
              complete: function () {
                $('#modal-img').hide();
              }
            })
          }
        });

      }
      // 原文链接：https://blog.csdn.net/qq_23543983/article/details/80438317


      window.getImg = async () => {
        await checkApi()
          console.log('执行--');
          wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              console.error("图像选择结果：", res)
              localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
              // 'https://www.baidu.com/img/flexible/logo/pc/result.png'

              getLocalData(localIds[0])
            }
          });
      }


      // 测试js-api
      function checkApi() {
        if(isReady){return}
        return new Promise((resolve, reject) => {
          // 获取最新的token对象
          let url = '../wx'
          let rel;
          $.ajax({
            type: "get",
            url,
            cache: false,
            async: false,
            dataType: 'json',
            // dataType: ($.browser.msie) ? "text" : "xml",
            success: function (xmlobj) {
              rel = xmlobj
              console.log('成功--', xmlobj);
            }
          }).responseText;

          console.log('token信息对象: ', typeof rel, rel, rel.length);

          var localIds = '';
          let uploadImg = document.getElementById('uploadImg')

          console.log('wx', wx);
          let obj = rel;
          // const obj ={
          //   "appId":"wx3680aee5b396cc0f",
          //   "timestamp":1637402688718,
          //   "nonceStr":"5158860791725619",
          //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};

          // 'getNetworkType', 'updateTimelineShareData'
          const jsArr = [
            'openLocation', 'chooseImage',
            'getLocation', 'onMenuShareQZone'
          ]
          wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: obj.appId, // 必填，公众号的唯一标识
            timestamp: obj.timestamp, // 必填，生成签名的时间戳
            nonceStr: obj.nonceStr, // 必填，生成签名的随机串
            signature: obj.signature,// 必填，签名
            jsApiList: jsArr // 必填，需要使用的JS接口列表
          });

          wx.ready(function (a, b) {
            console.log('read', a, b);

            wx.checkJsApi({
              jsApiList: jsArr, // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function (res) {
                console.error('success--ready--123-456', res);
                let str = $('<div></div>')
                let obj = res.checkResult
                for (const key in obj) {
                  if (obj[key]) {
                    str.append($(`<p>${key}</p>`))
                  }
                }
                $('#apiList').html(str)
                isReady = true;
                resolve()
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              }
            });
            // wx.updateTimelineShareData({
            //   title: '12', // 分享标题
            //   link: 'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //   imgUrl: '', // 分享图标
            //   success: function () {
            //     // 设置成功
            //   }
            // })
            // wx.getNetworkType({
            //   success: function (res) {
            //     var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            //   }
            // });
            // wx.getLocation({
            //   type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            //   success: function (res) {
            //     console.error('location:', res);
            //     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            //     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            //     var speed = res.speed; // 速度，以米/每秒计
            //     var accuracy = res.accuracy; // 位置精度

            //     wx.openLocation({
            //       latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
            //       longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。
            //       name: longitude, // 位置名
            //       address: '我的地址', // 地址详情说明
            //       scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
            //       infoUrl: 'http://www.baidu.com/' // 在查看位置界面底部显示的超链接,可点击跳转
            //     });
            //   },
            //   error: (err) => {
            //     console.error('err', err);
            //   }
            // });
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          });
          wx.error(function (a, b) {
            console.error('error', a, b);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          });
        })
      }

    })
  </script>
</body>

</html>